<template>
  <!-- 关系图 -->
  <div ref="main" style="width: auto;height:300px;"></div>
</template>

<script>
import { Style } from "./echartsStyle.js";
export default {
  props: {
    ring: {
      type: Boolean,
      default: false
    }
  },
  components: {},
  data() {
    return {
      option: {
        noDataLoadingOption: {
          text: "暂无数据",
          effect: "bubble",
          effectOption: {
            effect: {
              n: 0
            }
          }
        },
        color: Style.color,
        backgroundColor: Style.backgroundColor, //全局背景颜色
        textStyle: {
          //全局文字颜色
          // ...Style.textStyle
        },
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove"
        },
        series: [
          {
            type: "tree",
            label: {
              normal: {
                formatter: params => {
                  //格式化数据的函数leve
                  console.log(params);
                  return (
                    "{a|" +
                    params.name +
                    "}\n{hr|}\n  {b|总输入：}" +
                    params.value +
                    "kW \n{hr|}\n {c|" +
                    params.data.level +
                    "}"
                  );
                },
                rich: {
                  bk: {
                    backgroundColor: "#666"
                  },
                  a: {
                    color: "#999",
                    lineHeight: 22,
                    align: "center"
                  },
                  hr: {
                    borderColor: "#aaa",
                    width: "100%",
                    borderWidth: 0.5,
                    height: 0
                  },
                  b: {
                    fontSize: 12,
                    lineHeight: 33,
                    align: "center"
                  },
                  c: {
                    fontSize: 12,
                    lineHeight: 33,
                    align: "center"
                  },
                  per: {
                    color: "#eee",
                    backgroundColor: "#334455",
                    padding: [2, 4],
                    borderRadius: 2
                  }
                },
                backgroundColor: "#eee",
                borderColor: "#aaa",
                borderWidth: 1,
                borderRadius: 4,
                position: "left",
                verticalAlign: "middle",
                align: "right",
                fontSize: 9
              }
            },
            data: [
              {
                name: "flare",
                children: [
                  {
                    name: "flex",
                    children: [{ name: "FlareVis", value: 4116 }],
                    label: true,
                    position: "top",
                    distance: 20,
                    color: "red"
                  },
                  {
                    name: "scale",
                    children: [
                      { name: "IScaleMap", value: 2105 },
                      { name: "LinearScale", value: 1316 },
                      { name: "LogScale", value: 3151 },
                      { name: "OrdinalScale", value: 3770 },
                      { name: "QuantileScale", value: 2435 },
                      { name: "QuantitativeScale", value: 4839 },
                      { name: "RootScale", value: 1756 },
                      { name: "Scale", value: 4268 },
                      { name: "ScaleType", value: 1821 },
                      { name: "TimeScale", value: 5833 }
                    ]
                  },
                  {
                    name: "display",
                    children: [{ name: "DirtySprite", value: 8833 }]
                  }
                ]
              }
            ],

            grid: {
              ...Style.grid
            },
            lineStyle: {
              width: 1,
              curveness: 0.1
            },

            label: {
              // ...Style.textStyle,
              show: true,
              position: "left",
              verticalAlign: "middle",
              align: "right",
              fontSize: 12
            },

            leaves: {
              label: {
                position: "right",
                verticalAlign: "middle",
                align: "left"
              }
            },

            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
      }
    };
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {
    let myChart = this.$echarts.init(this.$refs.main);
    myChart.setOption(this.option);
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>